import React, { PropTypes, Component } from 'react';
import { Link } from 'react-router'
import Table from './MyTable'
import Column from './Column'
import styles from './SimpleTable.css';
import style from './addStore.css'
import {myAjax, ROOTURL_TABLE, ROOTPATH} from './../publicAPI/publicAPI';
/*const data1 = [ //Object键值对的键名必须为字符串形式
  {门店名称: 'AAA', 一月: 10, 二月: 120, 三月: 30, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'B', 一月: 12, 二月: 140, 三月: 32, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'C', 一月: 11, 二月: 124, 三月: 31, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'D', 一月: 9, 二月: 110, 三月: 28, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'E', 一月: 10, 二月: 118, 三月: 27, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'F', 一月: 12, 二月: 124, 三月: 29, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30}
];
const data2 = [ 
  {门店名称: 'AAA', 一月: 10, 二月: 120, 三月: 30, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'B', 一月: 12, 二月: 140, 三月: 32, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'C', 一月: 11, 二月: 124, 三月: 31, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'D', 一月: 9, 二月: 110, 三月: 28, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'E', 一月: 10, 二月: 118, 三月: 27, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30},
  {门店名称: 'F', 一月: 12, 二月: 124, 三月: 29, 四月: 10, 五月: 120, 六月: 30, 七月: 10, 八月: 120, 九月: 30, 十月: 10, 十一月: 120, 十二月: 30}
];*/




export default React.createClass({
	getInitialState: function() {
		let date = new Date();
	    return {
	        year: date.getFullYear(),
			tData: [{}],
			hasClicked: true
		};
	},

	componentWillMount: function() {
		//this.setState({tData: data1});
		let _this = this;
		myAjax(ROOTURL_TABLE + 'kabuy/kashop/monturnover.api', 'POST', {year:this.state.year}, function(data) {
			console.log(data);
			var processData = [];
			var ids = data.kaShopIds;
			//console.log(ids);
			for(var i in ids) {
				let id = ids[i];
				Object.assign(data[id], {'年营业额': data[id].kaShopYearTurnover, '门店名称': data[id].kaShopName});
			    delete data[id].kaShopName;
			    delete data[id].kaShopYearTurnover;
				processData.push(data[id]);
			}
			//console.log(processData);
			this.setState({tData: processData});
		}.bind(_this), function(err) {"获取服务器内容失败"});
	},

	handleClick: function() {
		let yearSelect = parseInt(this.refs.yearSelect.value);
		if(!yearSelect || !(/^2\d{3}$/.test(yearSelect))) {
		    alert("内容不能为空或格式错误");
		    this.refs.yearSelect.focus();
		    return
	    }
		let _this = this;
		myAjax(ROOTURL_TABLE + 'kabuy/kashop/monturnover.api', 'POST', {year:yearSelect}, function(data) {
			console.log(data);
			var processData = [];
			var ids = data.kaShopIds;
			//console.log(ids);
			for(var i in ids) {
				let id = ids[i];
				Object.assign(data[id], {'年营业额': data[id].kaShopYearTurnover, '门店名称': data[id].kaShopName});
			    delete data[id].kaShopName;
			    delete data[id].kaShopYearTurnover;
				processData.push(data[id]);
			}
			//console.log(processData);
			this.setState({tData: processData});
		}.bind(_this), function(err) {alert("获取服务器内容失败")});
	},
	handleKeyPress: function(e) {
	    if(e.which == 13) {
	        this.handleClick();
	    }
	},

	render: function() {
		return (
			<div>
			  	<div className="right-wapper">
			  	<div className="rt-wrap">
			  	<div>
					<label ><input ref="yearSelect" onKeyPress={this.handleKeyPress} className={styles.input} placeholder="如：2016" />年</label>
					<button onClick={this.handleClick} className={styles.button}>确定</button>
				</div>
			    <Table data={this.state.tData} className={styles.container}>
			      { //箭头函数返回一个对象时，用圆括号表示
			        //设置是否开启排序，捞一点就用手动咯
			        Object.keys(this.state.tData[0]).map(entry => {
		              if(/\D/g.test(entry)) {
		                if(/门店名称/.test(entry)) {
		                  //console.log(entry);
		                  return <Column dataKey={entry} name={entry} width="200px" order="false" key={`col-${entry}`}/>
		                } else {
		                  //console.log(entry);
		                  return <Column dataKey={entry} name={entry} width="200px" key={`col-${entry}`}/>
                		}
		              } else {
		                return <Column dataKey={entry} name={entry} width="100px" key={`col-${entry}`}/>
		              }
		              
		            })
			      }
			    </Table>
			    </div>
		    	</div>
    		</div>
		);
		
	}
});
